<template>
    <div>
        <p>抄袭了其他UI框架的色彩定义，抽象出了以下几种主题。</p>
        <div>
            <div
                v-for="colorPackage in colorPackages"
                class="c-m-t-m"
                :key="colorPackage.name"
            >
                <div>{{ colorPackage.name }}</div>
                <div class="c-p-l-xl">
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>主题色</div>
                        <div
                            class="c-m-l-m"
                            style="width: 100px; height: 50px"
                            :style="{
                                'background-color': colorPackage.themeColor,
                            }"
                        ></div>
                        <div class="c-m-l-m">{{ colorPackage.themeColor }}</div>
                    </div>
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>前景色</div>
                        <div
                            class="c-m-l-m"
                            style="width: 100px; height: 50px"
                            :style="{
                                'background-color': colorPackage.frontColor,
                            }"
                        ></div>
                        <div class="c-m-l-m">{{ colorPackage.frontColor }}</div>
                    </div>
                    <div class="c-f-h c-f-s-center c-m-t-m">
                        <div>背景色</div>
                        <div
                            class="c-m-l-m"
                            style="width: 100px; height: 50px"
                            :style="{
                                'background-color': colorPackage.bgColor,
                            }"
                        ></div>
                        <div class="c-m-l-m">{{ colorPackage.bgColor }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colorPackages: [
                { name: 'default', themeColor: '#666', frontColor: '#666', bgColor: '#ccc' },
                { name: 'primary', themeColor: '#409eff', frontColor: '#fff', bgColor: '#409eff' },
                { name: 'secondary', themeColor: '#a6d2ff', frontColor: '#fff', bgColor: '#a6d2ff' },
                { name: 'success', themeColor: '#67c23a', frontColor: '#fff', bgColor: '#67c23a' },
                { name: 'warning', themeColor: '#e6a23c', frontColor: '#fff', bgColor: '#e6a23c' },
                { name: 'error', themeColor: '#f56c6c', frontColor: '#fff', bgColor: '#f56c6c' },
            ]
        }
    }
}
</script>